<template>
  <div>
    <h4>header</h4>
    <template v-for="(item, index) in names" :key="item">
      <slot :item="item" :index="index"></slot>
    </template>
    <template v-for="(item, index) in names" :key="item">
      <slot name="content" :item="item" :index="index"></slot>
    </template>
    <h4>footer</h4>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    names: Array,
  },
  data() {
    return {
      color1: "red",
      color2: "blue",
      color: "red",
    };
  },
  mounted() {
    setTimeout(() => {
      this.color = this.color2;
    }, 2000);
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>
